<template>
	<div class="payment" style="padding-top:60rpx;">
		 <step :active="2"></step>
		<div class="order-info">
			<div class="order-info-item">
				<h3>订单编号</h3>
				<p>{{dataInfo.order_id}}</p>
			</div>
			<div  class="order-info-item">
				<h3>收货地址</h3>
				<div class="order-info-continer">
					<p>{{dataInfo.province + dataInfo.city + dataInfo.county + dataInfo.collect_address}}</p>
					<p>{{dataInfo.collect_name}} {{dataInfo.collect_phone}}</p>
				</div>
			</div>
			<image mode="widthFix" src="/static/order_info_bg.jpg"/>
			<div class="order-price">
				<h3>总价：<span>￥{{dataInfo.money}}</span></h3>
				<p>运费：￥{{dataInfo.peisong_money}}</p>
			</div>
		</div>
		<div class="pay-info">
			<!-- #ifdef APP-PLUS -->
				<button style="background: #1476fe;" @click="Alipay" type="default">支付宝支付</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
				<button @click="wechatPay" type="default">微信支付</button>
			<!-- #endif -->
			<!-- #ifdef MP-BAIDU -->
				<button @click="wechatPayBaidu" type="default">立即支付</button>
			<!-- #endif -->
		</div>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import fab from '@/components/fab'
	import { choosePayType,orderPay,orderBaiduPay,orderAliPay } from '@/api/payment'
	import { getAuth,getAuthData } from '@/api/user';
	export default {
	    data() {
			return{
				isTopBtn:false,
				dataInfo:''
			}
		},
		components:{
			fab,
		},
		computed:{
		  userInfo(){
		      return getAuth();
		  }  
		},
		onLoad(e){
			this.id = e.orderId
			choosePayType(this.userInfo.username,e.orderId).then((res)=>{
				this.dataInfo = res.data.datas;
			})
		},
		methods:{
			wechatPayBaidu(){
				/* 支付	 */
				orderBaiduPay(this.userInfo.username,this.id).then((res)=>{
					const orderInfo = JSON.parse(res.data.datas)
					uni.requestPayment({
					    provider: 'baidu',
						orderInfo,
					    success: (res)=>{
					        uni.redirectTo({
					        	url:'/pages/personal/orderDetails?id='+this.dataInfo.id+'&type=1'
					        })
					    },
					    fail: function (err) {
					    }
					});
				})
			},
			wechatPay(){
				uni.login({
				  provider: 'weixin',
				  success:(loginRes)=>{
					getAuthData(loginRes.code).then((res)=>{
				        let openid = res.data.datas.openid;
				        orderPay(this.userInfo.username,openid,this.dataInfo.id).then((res)=>{
				            let datas = res.data.datas;
				            uni.requestPayment({
				                provider: 'wxpay',
				                timeStamp:String(datas.timeStamp),
				                nonceStr: datas.nonceStr,
				                package: datas.package,
				                signType: 'MD5',
				                paySign: datas.paySign,
				                success:(res)=>{
				                    uni.redirectTo({
				                    	url:'/pages/personal/orderDetails?id='+this.dataInfo.id+'&type=1'
				                    })
				                },
				                fail: function (err) {
				                }
				            });
				        })
					})
				  }
				});
			},
			Alipay(){
					orderAliPay(this.userInfo.username,this.id).then((res)=>{
						const orderInfo = JSON.parse(res.data.datas)
						uni.requestPayment({
							provider: 'alipay',
							orderInfo,
							success:(res)=>{
								uni.redirectTo({
									url:'/pages/personal/orderDetails?id='+this.dataInfo.id+'&type=1'
								})
							},
							fail: function (err) {
							}
						});
					})
			}
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
	}	
</script>

<style lang="scss">
	.payment{
		background: #fff;
		.order-info{
			padding-top:30rpx;
			.order-info-item{
				width:690rpx;
				margin:0 auto;
				padding-top:10rpx;
				display: flex;
				justify-content: flex-start;
				h3{
					color:#999;
					font-size:28rpx;
					margin-right:20rpx;
				}
				p{
					color:#343434;
					font-size:28rpx;
					margin-bottom:10rpx;
				}
			}
			image{
				width:100%;
			}
			.order-price{
				text-align: center;
				margin-top:40rpx;
				margin-bottom:30rpx;
				h3{
					color:#000;
					font-size:34rpx;
					margin-top:10rpx;
					span{
						color:#f00;
						font-weight: bold;
					}
				}
				p{
					margin-top:20rpx;
					color:#999;
					font-size:28rpx;
				}
			}
		}
		.pay-info{
			width:690rpx;
			margin:0 auto;
			padding-bottom:30rpx;
			button{
				width:90%;
				font-size:28rpx;
				margin-bottom:20rpx;
				&:nth-of-type(1){
					background: #10cc0f;
					color:#fff;
				}
				&:nth-of-type(2){
					background: #25a5e1;
					color:#fff;
				}
				&:after{
					border:none;
				}
			}
		}
	}
</style>
